<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>悦生活物业</title>
		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!-- 引入css文件 -->
		<link rel="stylesheet" href=" ../css/sm.min.css">
		<link rel="stylesheet" href=" ../css/sm-extend.min.css">
	</head>
	<style>
		.button {
			margin-left: 70%;
		}
	</style>
	<body>
		<!-- page 容器 -->
		<div class="page" id="app">
			<!-- 标题栏 -->
			<header class="bar bar-nav">
				<!-- <a class="icon icon-menu pull-right open-panel"></a> -->
				<a class="button button-link button-nav pull-left" @click="goback()">
					<span class="icon icon-left"></span>
				</a>

				<!-- 社区入口 -->

				<h1 class="title">悦生活物业</h1>
			</header>

			<!-- 工具栏 -->
			<nav class="bar bar-tab">
				<a class="tab-item external" href="../main-index.html">
					<span class="icon icon-app"></span>
					<span class="tab-label">首页</span>
				</a>
				<a class="tab-item external" href="manager_fail.html">
					<span class="icon icon-settings"></span>
					<span class="tab-label">故障申请</span>
				</a>
				<a class="tab-item external" href="manager_charge_info.html">
					<span class="icon icon-home"></span>
					<span class="tab-label">物业缴费情况</span>
				</a>
				<a class="tab-item external" href="manager_myactivity.html">
					<span class="icon icon-friends"></span>
					<span class="tab-label">我的社区活动</span>
				</a>
			</nav>

			<!-- 这里是页面内容区 -->
			<div class="content">
				<div class="content-block" v-for="activity in dataList">
					<div class="card" v-if="timeCount(activity.activitytime)">
						<div class="card-header" v-text="activity.name">活动名称</div>
						<div class="card-content">
							<div class="card-content-inner" v-text="activity.activitytime">活动时间</div>
							<div class="card-content-inner" v-text="activity.address">活动地址</div>
						</div>
					</div>
					<div class="card" v-else style="background-color: lightgray;">
						<div class="card-header" v-html="activity.name +`<span style='color:red;'>活动已过期</span>`">活动名称</div>
						<div class="card-content">
							<div class="card-content-inner" v-text="activity.activitytime">活动时间</div>
							<div class="card-content-inner" v-text="activity.address">活动地址</div>
						</div>
					</div>
				</div>
			</div>
		</div>


		<!-- Services Popup -->
		<div class="popup popup-services">
			<div class="content-block">
				<p>Services</p>
				<p><a href="#" class="close-popup">Close popup</a></p>
				<p>Lorem ipsum dolor ...</p>
			</div>
		</div>

		<!-- popup, panel 等放在这里 -->
		<div class="panel-overlay"></div>
		<!-- Left Panel with Reveal effect -->
		<div class="panel panel-right panel-cover" style="background-image: linear-gradient(to right,#f5f7fa,#c3cfe2)">
			<p><a href="#" class="close-panel">关闭菜单</a></p>
			<div class="content-block">
				<p>这是一个侧栏</p>


			</div>
		</div>
		<script src='../js/jquery-3.2.1.min.js'></script>
		<script src='../js/sm.js'></script>
		<script src='../js/sm-extend.js'></script>
		<script src="../js/vue.js"></script>
		<script src="../js/axios.min.js"></script>
		<script src="../js/config.js"></script>
		<script>
			var vm = new Vue({
				el: "#app",
				data: {
					dataList: []
				},
				created() {
					this.getActivty()
				},
				methods: {
					// 活动过期校验
					timeCount(time) {
						var num = new Date().getTime() - Date.parse(time);
						var date = new Date(Date.parse(time));
						//一小时以内
						if (num > 0) {
							return false;
						}else{
							return true;
						}
					},
					// 是否参加活动
					joinActivity(activity){
						console.log("修改是否参加活动",activity)
						// 发送请求,然后加入活动
						var that = this;
						$.ajax({
							url: serviceIP + "/app/manager/activity/list",
							type: "post",
							dataType: "json",
							cache: false,
							data: null,
							headers: {
								"token": token,
								"refreshtoken": refreshtoken
							},
							processData: false, // 不处理数据
							contentType: false, // 不设置内容类型
							success: function(data) {
								if (data && data.code == 0) {
									console.log("回显数据", data.page.list)
									vm.dataList = data.page.list
								}
							}
						});
						// 参加过就提示
					},
					// 返回上一页
					goback() {
						window.history.go(-1)
					},
					getActivty() {
						var that = this;
						$.ajax({
							url: serviceIP + "/app/manager/activity/list",
							type: "post",
							dataType: "json",
							cache: false,
							data: null,
							headers: {
								"token": token,
								"refreshtoken": refreshtoken
							},
							processData: false, // 不处理数据
							contentType: false, // 不设置内容类型
							success: function(data) {
								if (data && data.code == 0) {
									console.log("回显数据", data.page.list)
									vm.dataList = data.page.list
								}
							}
						});

					},
					getInfo() {
						var that = this;
						$.ajax({
							url: serviceIP + "/app/manager/activity/list",
							type: "post",
							dataType: "json",
							cache: false,
							data: null,
							headers: {
								"token": token,
								"refreshtoken": refreshtoken
							},
							processData: false, // 不处理数据
							contentType: false, // 不设置内容类型
							success: function(data) {
								console.log(data)
							}
						});

					}
				}
			})
		</script>
	</body>
	</body>
</html>
